<template>
  <el-menu
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
    :collapse="isCollapse"
    :default-active="defaultA"
  >
    <!-- 添加router属性 使得侧边栏可以导航 -->
    <el-submenu
      :index="(firstChildren.order).toString()"
      v-for="(firstChildren, firstIndex) in menu"
      :key="firstIndex"
    >
      <template slot="title">
        <i class="el-icon-menu"></i>
        <!-- <i :class="firstChildren.id == 1 ? 'el-icon-location' : "></i> -->
        <span>{{ firstChildren.authName }}</span>
      </template>

      <el-menu-item-group>
        <el-menu-item
          :index="'/'+secondChildren.path"
          v-for="(secondChildren, secondIndex) in firstChildren.children"
          :key="secondIndex"
          >{{ secondChildren.authName }}</el-menu-item
        >
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
import { getMenu } from "../api/index";

export default {
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
     
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    }
  },

  data() {
    return {
      menu: [],
    };
  },

  computed: {
    isCollapse() {
      console.log(this.$store.state.isCollapse);
      return this.$store.state.isCollapse;
    },
    defaultA() {
      return this.$route.path
    }
  },

  async beforeMount() {
    let { data, meta } = await getMenu();
    console.log(this.$router);
    this.menu = data;
  }
};
</script>

<style scoped lang="scss">
.el-menu-vertical-demo {
  min-height: 300px;
  border: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
